<template>
	<s-layout title="车之家" tabbar="/pages/index/car" :bgStyle="{ color: '#f5f5f5' }">
		<view class="car-top">
			<view class="car-tabs ss-flex">
				<view 
					class="tabs-item" 
					:class="{'tabs-item-active': item.id == state.activeId}" 
					v-for="item in state.carTabs"
					@click="changeTabs(item)"
					>{{item.name}}
				</view>
			</view>
			
			<view class="car-brand-list ss-flex">
				<view class="brand-item" v-for="item in state.carBrand" @click="goCarList(item)">
					<image class="brand-icon" :src="item.logo"></image>
					<view class="brand-name">{{item.name}}</view>
				</view>
				<view class="brand-item" @click="moreCar">
					<view class="brand-icon">
						<uni-icons type="more-filled" size="30"></uni-icons>
					</view>
					<view class="brand-name">更多</view>
				</view>
			</view>
		</view>
		
		<view class="car-hot">
			<view class="car-hot-title ss-flex ss-row-center">
				<image class="car-hot-icon" src="https://www1.pcauto.com.cn/zt/gz20220412/wap/home/img/home-img/left-icon2x.png"></image>
				<text>热门</text>
				<image class="car-hot-icon" src="https://www1.pcauto.com.cn/zt/gz20220412/wap/home/img/home-img/right-icon2x.png"></image>
			</view>
			<view class="car-list" v-if="state.pagination.total > 0">
				<s-car-item v-for="item in state.pagination.data" :item="item"></s-car-item>
			</view>
			
			<s-empty v-else text="暂无数据" icon="/static/data-empty.png" />
			
			<uni-load-more
			  v-if="state.pagination.total > 0"
			  :status="state.loadStatus"
			  :content-text="{
			    contentdown: $t('pages.user.wallet.load'),
			  }"
			  @tap="onLoadMore"
			/>
		</view>
	</s-layout>
</template>

<script setup>
import { reactive } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import _ from 'lodash';

const pagination = {
	data: [],
	current_page: 1,
	total: 1,
	last_page: 1
};
  
const state = reactive({
	activeId: '1',
	carTabs: [
		{id: '1', name: '推荐'},
		{id: '2', name: '按品牌'},
		{id: '3', name: '按价格'},
		{id: '4', name: '按级别'},
		{id: '5', name: '热门车'},
	],
	carBrand: [],
	pagination,
	loadStatus: ''
})

async function getCar() {
	const res = await sheep.$api.car.carIndex()
	state.carBrand = res.data.data.slice(0, 9)
}

async function getCarList(page = 1, list_rows = 8) {
	const res = await sheep.$api.car.carList({
		is_hot: 1,
		list_rows,
		page,
	})
	if (res.code === 1) {
		let list = _.concat(state.pagination.data, res.data.data);
		state.pagination = {
			...res.data,
			data: list
		};
		if (state.pagination.current_page < state.pagination.last_page) {
			state.loadStatus = 'more';
		} else {
			state.loadStatus = 'noMore';
		}
	}
}

onLoad(async (options) => {
    await getCar();
    await getCarList();
});

function onLoadMore() {
    if (state.loadStatus !== 'noMore') {
      getCarList(state.pagination.current_page + 1);
    }
}
onReachBottom(() => {
	onLoadMore();
});

function changeTabs(item) {
	state.activeId = item.id
}
function moreCar() {
	sheep.$router.go('/pages/car/car-more')
}
function goCarList(item) {
	sheep.$router.go('/pages/car/car-list?car_brand_id=' + item.id + '&title=' + item.name)
}
</script>

<style lang="scss" scoped>
	.car-top {
		margin: 10px;
		border-radius: 8px;
		padding: 30rpx;
		background: rgb(255, 255, 255);
		
		.car-tabs {
			justify-content: space-between;
			.tabs-item {
				font-size: 26rpx;
				text-align: center;
				padding: 6rpx 12rpx;
				background: #f7f8fb;
			}
			
			.tabs-item-active {
				background: rgba(255,100,0,.1);
				color: #ff6400;
			}
		}
	}
	
	.car-brand-list {
		flex-wrap: wrap;
		.brand-item {
			text-align: center;
			width: 20%;
			margin: 24rpx 0 0;
			
			.brand-icon {
				display: inline-block;
				width: 72rpx;
				height: 72rpx;
			}
			.brand-name {
				color: #333;
				font-size: 24rpx;
			}
		}
	}
	
	.car-hot {
		margin: 10px;
		border-radius: 8px;
		background: rgb(255, 255, 255);
		
		.car-hot-title {
			padding: 30rpx;
			font-size: 28rpx;
			font-weight: 800;
			border-bottom: 1rpx solid #e5e5e5;
		}
		.car-hot-icon {
			width: 40rpx;
			height: 24rpx;
			margin: 0 20rpx;
		}
	}
	
	.car-list {
		padding: 0 30rpx;
	}
</style>